<template>
  <div class="common-detail">
    <div class="common-detail-content">
        <div class="header">
            <div class="title">
                添加/编辑
            </div>
            <el-button @click="onPageBack">返回</el-button>
        </div>
        <div class="add-form-content f-g f-r">
            <SubmitForm
                :rule-form="ruleForm"
                :rules="rules"
                :form-list="formList"
                @change="handleFormChange"
                @close="onPageBack"
                @save="onSave"
            />
            <div class="f-s">
                <span class="f-c box" style="margin-left: 50px">
                     <span style="color: #2752f4;padding-bottom: 10px">评审指引</span>
                    <span style="padding: 17px 20px 17px 18px ; line-height: 24px;font-size: 14px;border-bottom: 1px solid #DEDEDE;" v-for="item in projectInsList">
                        {{ item.meetingType}}. {{item.name}}：{{item.content}}
                    </span>
                </span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { http } from '@/api'
import { PaperType, getName, MeetingType } from '@/dict'
export default {
  name: 'FormAdd',
  data() {
    return {
      MeetingType: [],
      ruleForm: {
      },
      rules: {
        projectName: [{ required: true, message: '不能为空' }]
      },
      formList: [
        {
          key: 'projectName',
          name: 'input',
          label: '项目名称',
          colSpan: 12
        },
        {
          key: '会议类别',
          name: 'select',
          label: '会议类别',
          options: [],
          colSpan: 12
        },
        {
          key: 'pocket',
          name: 'input',
          type: 'number',
          label: '资金（万元）',
          colSpan: 12
        },
        {
          key: 'capital',
          name: 'input',
          label: '项目主体',
          colSpan: 12
        },
        {
          key: 'contacts',
          name: 'input',
          label: '联系人',
          colSpan: 12
        },
        {
          key: 'phone',
          name: 'input',
          label: '联系电话',
          colSpan: 12
        },
          {
              key: 'projectContacts',
              name: 'input',
              label: '项目联系人',
              colSpan: 12
          },
          {
              key: 'projectPhone',
              name: 'input',
              label: '项目联系人电话',
              colSpan: 12
          },
        {
          key: 'address',
          name: 'input',
          label: '建设地址',
          colSpan: 24
        },
        {
          key: 'projectContent',
          name: 'input',
          type: 'textarea',
          label: '项目内容',
          colSpan: 24
        },
        {
          name: 'title',
          label: '附件资料',
          colSpan: 24
        },
        {
          key: 'paper',
          name: 'select',
          label: '纸张',
          options: PaperType,
          colSpan: 12
        },
        {
          key: 'pages',
          name: 'el-input-number',
          type: 'number',
          label: '页数',
          colSpan: 12
        },
        {
          key: 'copies',
          name: 'el-input-number',
          type: 'number',
          label: '资料份数',
          colSpan: 12
        },
        {
          key: 'savingCapital',
          name: 'el-input-number',
          type: 'number',
          label: '节约资金（元）',
          colSpan: 12,
        },
        {
          key: 'files',
          name: 'files',
          multiple: true,
          defaultValue: [],
          label: '',
          description: '备注：需要上传ppt、环评报告'
        }
      ],
        projectInsList: []
    }
  },
  created() {
      http.projectIns().then(res => {
          console.log(res)
          this.projectInsList = res.data.map(el => {
              return {
                  ...el,
                  name: getName(el.meetingType, MeetingType)
              }
          })
      })
    this.open()
  },
  methods: {
      handleFormChange({ key, val}) {
          if (key === 'paper' || key === 'pages' || key === 'copies') {
              this.getCapital()
          }
      },
      getCapital() {
          const { paper, pages,copies } = this.ruleForm
          if (pages && paper && copies) {
              http.admin_project_center.getSavingCapital({
                  paper,
                  pages,
                  copies
              }).then(res => {
                  this.ruleForm.savingCapital = res.data
              })
          }
      },
    getForm() {
      const form = {
        id: undefined,
        category: 1,
        files: []
      }
      this.formList.forEach(el => {
        if (el.key) {
          form[el.key] = el.defaultValue || ''
        }
      })
      return form
    },
   open() {
      this.ruleForm = this.getForm()
      http.getMeetingType().then(res => {
          this.formList[1].options = res.data
          this.ruleForm.meetingType = res.data[0].value
      })
    },
    onPageBack() {
      this.$router.back()
    },
    onSave() {
      http.admin_project_center.create({ ...this.ruleForm }).then(res => {
        this.$message.success(res.msg)
        this.onPageBack()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.common-detail {
    width: 100%;
    height: 100%;
    .box {
        height: initial;
        background-color: #f3f6ff;
        border-radius: 14px;
        padding: 20px 0;
        span{
          padding: 0 20px;
        }
        
    }
    .common-detail-content {
        background: #FFFFFF;
        box-shadow: 6px 6px 54px 1px rgba(0,0,0,0.05);
        border-radius: 14px 14px 14px 14px;
        padding: 30px;
        .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
            .title {
                font-size: 20px;
                color: #333333;
                font-weight: bold;
            }
        }
    }
}
</style>
